<template>
  <el-dialog class="myDiaLog" title="工单详情" width="600px" :visible="dialogDetailVisible" @close="closeDetail">
    <el-row type="flex" class="row-bg" justify="space-around" align="middle" style="height:60px">
      <el-col :span="6">
        <img class="iconImg" :src="iconSrc" alt>
        <span style="line-height:60px;margin-left:20px">{{ dialogState }}</span>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light" />
        <img class="img" :src="imgSrc" alt>
      </el-col>
    </el-row>
    <ul v-if="Object.values(rowData).length !== 0" class="con">
      <li>设备编号：{{ rowData.innerCode }}</li>
      <li>创建日期：{{ rowData.createTime }}</li>
      <li v-if="type === 4">完成日期：{{ rowData.updateTime }}</li>
      <li v-else-if="type === 3">取消日期：{{ rowData.updateTime }}</li>
      <li>运维人员：{{ rowData.userName }}</li>
      <li>工单类型：{{ rowData.taskType !== null ? rowData.taskType.typeName : '' }}</li>
      <li>工单方式：{{ rowData.method }}</li>
      <li v-if="type === 4 || type === 1">备注：{{ rowData.desc }}</li>
      <li v-if="type === 3">取消原因：</li>
      <li v-if="type === 4">
        定位：
        <span class="el-icon-location" style="color:skyblue" />
        {{ rowData.addr }}</li>
    </ul>
    <el-button v-show="type === 3" type="danger" @click="handleSubmit(rowData.taskId)">{{ buttonName }}</el-button>
    <el-popconfirm
      v-show="type === 1"
      confirm-button-text="确定"
      cancel-button-text="取消"
      icon="el-icon-info"
      icon-color="red"
      title="取消工单后，将不能恢复，是否确认取消？"
      @onConfirm="handleSubmit(rowData.taskId)"
    >
      <el-button slot="reference" type="danger">{{ buttonName }}</el-button>
    </el-popconfirm>
  </el-dialog>
</template>

<script>
import { mapState, mapGetters, mapMutations } from 'vuex'
import { cancelTask } from '@/api/table'
import { Message } from 'element-ui'
export default {
  name: 'DetailDialog',
  data() {
    return {

    }
  },
  computed: {
    ...mapState('maintenance', ['dialogDetailVisible', 'type', 'rowData']),
    ...mapGetters('maintenance', ['imgSrc', 'iconSrc', 'dialogState', 'buttonName'])
  },
  methods: {
    ...mapMutations('maintenance', ['closeDetail', 'openForm']),
    async handleSubmit(id) {
      if (this.type === 3) {
        this.openForm()
        this.closeDetail()
        this.form = this.rowData
      } else if (this.type === 1) {
        try {
          await cancelTask(id)
          Message({
            message: '取消成功',
            type: 'success'
          })
        } catch (error) {
          Message({
            message: error.message,
            type: 'error'
          })
        } finally {
          // 关闭详情框
          this.closeDetail()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.myDiaLog {
  text-align: center;
  .row-bg {
    padding: 10px 0;
    background-color: #faf9fc;
    .iconImg {
      transform: translateY(30%);
      height: 30px;
    }
    img {
      height: 75px;
    }
  }
  .con {
    width: 100%;
    height: 150px;
    display: flex;
    flex-wrap: wrap;
    li {
      width: 50%;
      height: 20px;
      text-align:left;
      line-height: 20px;
      list-style: none;
    }
  }
}
</style>
